import React from 'react'
import Admin from "../../../layout/Admin";
import GiftModel from "../../../model/gift";
import moment from "moment";
import {Card, Checkbox, DatePicker, Select, Table} from 'antd'
import {GiftMapper} from "../../../constant/constant";
import PaginationFooter from "../../../component/PaginationFooter/PaginationFooter";
import {defaultEnd, defaultStart} from "../../user/user-total/user-total";
const {RangePicker} = DatePicker

class Gift extends React.Component {
    constructor(props) {
        super(props)
        this.model = new GiftModel()
        this.state = {
            totalDetail : {total: 0, count: 0, piece: 0, expire: 0,},
            todayDetail : {total: 0, count: 0,},
            totalGift: [],
            todayGift: [],
            list: [],
            total: 0,
            p: 0,
            type: -1,
            start: defaultStart,
            end: defaultEnd,
            timeCheck: false,

        }
        this.columns = [
            // Anchorid: ""
            // Anchorname: "开盲盒(赛)"
            // Commission: 0
            // Cost: 10
            // Count: 0
            // CreateT: "2021-01-18T13:46:54.976465+08:00"
            // Dealno: "20210118134654.1"
            // Detailtype: 4
            // Game: "越青锦"
            // Id: "6651b5fa-1ae5-44a8-b37d-717dc6064357"
            // Name: ["越青锦", "越青錦U19", "VIE U19"]
            // Propid: -1
            // Srcid: 0
            // State: 1
            // Username: "zhengkeyu"
            {
                title: '使用时间',
                dataIndex: 'CreateT',
                render: text => text.slice(0, '2021-01-18T13:46:54'.length).split('T').join(' ')
            },
            {
                title: '用户名',
                dataIndex: 'Username',
            },
            {
                title: 'UID',
                dataIndex: 'Id',
            },
            {
                title: '订单编号',
                dataIndex: 'Dealno',
            },
            {
                title: '花费金币',
                dataIndex: 'Cost',
            },
            {
                title: '使用道具',
                dataIndex: 'Propid',
                render: (id) => {
                    const giftId = `gift_${id}`
                    const giftData = GiftMapper[giftId]
                    if (giftData) {
                        return giftData.name
                    } else {
                        return '游戏道具'
                    }
                }
            },
            {
                title: '使用个数',
                dataIndex: 'Count',
            },
            {
                title: '赛事',
                dataIndex: 'Game'
            },
            {
                title: '类型',
                dataIndex: 'Detailtype',
                render: (text) => {
                    const types = [
                        'ai 或 用户聊天',
                        '方案打赏',
                        '方案购买',
                        '一起看送礼物',
                        '一起看赞助',
                        '盲盒',
                        '点球大战',
                    ]
                    return types[text]
                }
            },
        ]
    }

    componentDidMount() {
        this.all()
        this.detail()
    }


    all() {
        const params = {
            P: this.state.p,
            Dtype: this.state.type,
            Starttime: '',
            Endtime: '',
        }
        if (this.state.timeCheck) {
            // 2006-01-02 15:04:05
            const start = this.state.start.format('YYYY-MM-DD HH:mm:ss')
            const end = this.state.end.format('YYYY-MM-DD HH:mm:ss')
            params.Starttime = start
            params.Endtime = end
        }

        this.model
            .all(params)
            .then(res => {
                const data = res.data
                this.setState({
                    list: data.ok,
                    total: data.total,
                })
            })
    }

    detail() {
        this.model
            .detail()
            .then(res => {
                const data = res.data
                const today = {}
                const total = {
                    piece: data.sixblock,
                    expire: data.expire,
                }

                Object.entries(data).map(([k, v,]) => {
                    if (k.includes('1')) {
                        let key = k.slice(0, k.length - 1)
                        total[key] = v
                    } else if (k.includes('2')) {
                        let key = k.slice(0, k.length - 1)
                        today[key] = v
                    }
                })

                this.setState({
                    totalDetail: total,
                    todayDetail: today,
                    totalGift: total.m,
                    todayGift: today.m,
                })
            })
    }

    prevPage = () => {
        this.setState({
            p: this.state.p - 1,
        }, () => this.all())
    }

    nextPage = () => {
        this.setState({
            p: this.state.p + 1,
        }, () => this.all())
    }

    onDateChange = (value,) => {
        const [start, end,] = value
        this.setState({
            start,
            end,
        }, () => {
            // this.get()
            this.all()
        })
    }

    onTypeSelect = (value, option) => {
        this.setState({
            type: value,
            p: 0,
        }, () => this.all())
    }

    render() {
        const totalDetail = this.state.totalDetail
        const todayDetail = this.state.todayDetail
        const totalGift = this.state.totalGift
        const todayGift = this.state.todayGift

        return <Admin>
            <div className='list-container'>

                <p>道具消耗汇总</p>
                <div>
                    <p>道具总消耗{totalDetail.count}（个）{totalDetail.total}（金币）</p>
                    <p>本期：{totalDetail.piece}个碎片未兑换，本期到期时间：{totalDetail.expire && moment(new Date(totalDetail.expire * 1000)).format('YYYY-MM-DD')}</p>
                </div>
                {Object.entries(totalGift).map(([giftId, count,], index) => {
                    const giftData = GiftMapper[`gift_${giftId}`]
                    if (giftData) {
                        return <Card
                            key={index}
                            title={giftData.name}
                            style={{width: '120px', display: 'inline-block', margin: '8px',}}
                        >{count}</Card>
                    }
                })}
                <div>
                    <p>本日道具消耗{todayDetail.count}（个）{todayDetail.total}（金币）</p>
                </div>
                {Object.entries(todayGift).map(([giftId, count,], index) => {
                    const giftData = GiftMapper[`gift_${giftId}`]
                    if (giftData) {
                        return <Card
                            key={index}
                            title={giftData.name}
                            style={{width: '120px', display: 'inline-block', margin: '8px',}}
                        >{count}</Card>
                    }
                })}
                <div>
                    <Select
                        style={{marginRight: '8px', width: 200}}
                        defaultValue={this.state.type}
                        value={this.state.type}
                        onChange={(val, opt) => this.onTypeSelect(val, opt)}
                    >
                        {/*//类型,-1=不限制，0=ai或聊天，1=方案打赏，2=方案购买，3=一起看送礼物，4=一起看赞助,5=盲盒,6=点球大战*/}

                        <Select.Option value={-1}>全部</Select.Option>
                        <Select.Option value={0}>聊天室内（包括AI）</Select.Option>
                        <Select.Option value={1}>方案打赏</Select.Option>
                        <Select.Option value={2}>方案购买</Select.Option>
                        <Select.Option value={3}>一起看送礼物</Select.Option>
                        <Select.Option value={4}>一起看赞助</Select.Option>
                        <Select.Option value={5}>盲盒</Select.Option>
                        <Select.Option value={6}>点球大战</Select.Option>
                    </Select>
                    <Checkbox
                        checked={this.state.timeCheck}
                        onChange={() => {
                            this.setState({
                                timeCheck: !this.state.timeCheck,
                            }, () => {
                                this.all()
                            })
                        }}
                    >
                        时间:
                    </Checkbox>
                    <RangePicker
                        showTime={{ format: 'HH:mm:ss' }}
                        format="YYYY-MM-DD HH:mm:ss"
                        onChange={this.onDateChange}
                        defaultValue={[
                            this.state.start,
                            this.state.end,
                        ]}
                        disabled={this.state.timeCheck === false}
                    />
                </div>
                <Table
                    dataSource={this.state.list}
                    columns={this.columns}
                    pagination={false}
                    rowKey={(record, index) => index}
                />
                <PaginationFooter
                    pageIndex={this.state.p}
                    prevPage={this.prevPage}
                    nextPage={this.nextPage}
                />
            </div>
        </Admin>
    }
}

export default Gift